<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="../node_modules/@vue/reactivity/dist/reactivity.global.js"></script>

<script>
  const { effect,reactive } = VueReactivity
  console.log('effect:',effect);
  const state = reactive({name:'ahhh',age:123,other:'xxx'})

  //会给响应式对象绑定一个effect（存起来, 和vue2.x一样, 取值的时候存起来）,等会改值时会再次调用
  /*
    vue2中 当页面渲染时 会取值 会做依赖搜集 搜集的是watcher
    vue3中 属性搜集的是 effect
  */
  //另外effect在调用时会立即执行一次
  effect(() => {
    console.log('render')

    app.innerHTML = state.name + ',' + state.age
    //↑ state.xx 会对代理对象取值 就会走到get方法
  });

  setTimeout(() => {
    state.name = 'rocky'
    //↑ 数据变了 会触发代理对象的 set方法
    //  也就会重新执行上面的effect方法
  }, 1000)

  setTimeout(() => {
    state.other = 'yyy'
    //↑ 没有出现在effect中过, 故不存在绑定关系, 也就不会是响应式的(effect并不会因为没有绑定关系的数据变化而重新执行)
    //  你可以发现控制台并没有多打印一次render
  }, 2000)
</script>
</body>
</html>
